<template>
  <div class="home">
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <div class="logo">
          <div class="logo-img"></div>
          <div class="logo-text">Vue-Admin</div>
        </div>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <span>基地管理</span>
              </span>
            </template>
            <a-menu-item key="1">
              <router-link to="/one">基地详细信息</router-link>
            </a-menu-item>
            <a-menu-item key="2">
              <router-link to="/two">添加基地</router-link>
            </a-menu-item>
            <a-menu-item key="3">
              <router-link to="/three">全部基地</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <span>开课管理</span>
              </span>
            </template>
            <a-menu-item key="4">
              <router-link to="/four">创建开课</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <router-view></router-view>
    </a-layout>
  </div>
</template>

<script setup>
import { ref } from "vue";
const collapsed = ref(false);
const selectedKeys = ref(null);
</script>

<script>

export default {
  name: "HomeView",
};
</script>


<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.logo {
  width: 80%;
  aspect-ratio: 4/1;
  margin: 10px auto;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 80%;
  aspect-ratio: 1/1;
  background-color: #fff;
  flex: 1;
  border-radius: 20%;
}

.logo-text {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 5;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.521);
  font-weight: bold;
}
</style>
